<script setup lang="ts">
import { reactive, ref } from 'vue'

import { Page, useVbenModal } from '@vben/common-ui'

import { Col, DatePicker, Form, FormItem, Input, InputNumber, message, Row, Select, Table } from 'ant-design-vue'

import { DictAddInit } from '#/api/goods'
import { createProcessPurchase, getCompanyList } from '#/api/spuBom'

const emit = defineEmits(['refresh'])

const selectRows = ref([])

const columns1: any = [
  {
    title: '实际面料',
    children: [
      {
        title: '面料名称',
        dataIndex: 'process_name',
        key: 'process_name',
        align: 'center',
        width: 200,
      },
      {
        title: '供应商',
        dataIndex: 'SupplyNa',
        key: 'SupplyNa',
        align: 'center',
        width: 200,
      },
      {
        title: '单价',
        dataIndex: 'price',
        key: 'price',
        align: 'center',
      },
    ],
  },
  { title: '', dataIndex: 'first', key: 'first', align: 'center' },
  { title: '', dataIndex: 'second', key: 'second', align: 'center' },
  { title: '', dataIndex: 'third', key: 'third', align: 'center' },
  { title: '', dataIndex: 'fourth', key: 'fourth', align: 'center' },
  { title: '', dataIndex: 'fifth', key: 'fifth', align: 'center' },
  { title: '', dataIndex: 'sixth', key: 'sixth', align: 'center' },
  { title: '', dataIndex: 'seventh', key: 'seventh', align: 'center' },
  { title: '', dataIndex: 'eighth', key: 'eighth', align: 'center' },
  { title: '', dataIndex: 'ninth', key: 'ninth', align: 'center' },
  { title: '', dataIndex: 'tenth', key: 'tenth', align: 'center' },
  { title: '', dataIndex: 'eleven', key: 'eleven', align: 'center' },
  { title: '', dataIndex: 'twelve', key: 'twelve', align: 'center' },
  { title: '交期', dataIndex: 'delivery_date', key: 'delivery_date', align: 'center', width: 350 },
  { title: '', dataIndex: 'delivery_day', key: 'delivery_day', align: 'center' },
  { title: '备注', dataIndex: 'remark', key: 'remark', align: 'center', width: 350 },
]

const [Modal, modalApi] = useVbenModal({
  class: 'w-5/6',
  appendToMain: true,
  confirmText: '确认工序下单',
  onCancel() {
    modalApi.close()
  },
  async onConfirm() {
    const params = {
      formData: {
        fk_type: formModel.fk_type,
        fk_rule: formModel.fk_rule,
        company_name: formModel.company_name,
        detail: selectRows.value,
        id: formModel.id,
      },
    }
    modalApi.lock(true)
    createProcessPurchase(params).then((res: any) => {
      modalApi.unlock()
      if (res.data.code === 1) {
        message.success(res.data.msg)
        modalApi.close()
        emit('refresh')
      } else {
        message.error(res.data.msg)
      }
    })
  },
  onOpenChange: async (isOpen: boolean) => {
    getCompanyList().then((res) => {
      companyList.value = res.map((item: any) => ({ value: item.id, label: item.name }))
    })
    DictAddInit({ keys: ['paymentMethod', 'paymentRule'], type: 2 }).then((result: any) => {
      paymentMethod.value = result.select_list.paymentMethod.map((item: any) => ({
        label: item.name,
        value: item.value,
        code: item.name,
        id: Number(item.id),
      }))
      // 初始化结算规则并添加禁用状态
      paymentRule.value = result.select_list.paymentRule.map((item: any) => ({
        label: item.name,
        value: item.name,
        code: item.value,
        id: Number(item.id),
      }))
      formModel.fk_type = paymentMethod.value[0].value
      changeType(formModel.fk_type)
    })
    if (!isOpen) return
    const { data, id, purchase_id } = modalApi.getData<Record<string, any>>()
    formModel.id = id
    selectRows.value = data
    formModel.purchase_id = purchase_id
  },
})

function changeType(data: any) {
  formModel.fk_rule = ''
  paymentRule.value = paymentRule.value?.map((item: any) => ({
    ...item,
    disabled: item.code !== data,
  }))
}
const formModel = reactive({
  fk_type: '',
  company_name: '',
  fk_rule: '',
  id: '',
  purchase_id: '',
  remark: '',
})

const companyList = ref([])
const paymentMethod = ref([])
const paymentRule = ref([])
</script>

<template>
  <Modal title="确认工序下单？">
    <Page>
      <Form :label-col="{ span: 7.5 }" :model="formModel">
        <Row :gutter="[15, 0]">
          <Col :span="6">
            <FormItem name="reqCode" label="下单方(主体)">
              <Select v-model:value="formModel.company_name" show-search allow-clear style="width: 100%; height: 100%" placeholder="请输入" :options="companyList" />
            </FormItem>
          </Col>
          <Col :span="6">
            <FormItem name="reqCode" label="结算方式">
              <Select v-model:value="formModel.fk_type" @change="changeType" show-search allow-clear style="width: 100%; height: 100%" placeholder="请输入" :options="paymentMethod" />
            </FormItem>
          </Col>
          <Col :span="6">
            <FormItem name="reqCode" label="结算规则">
              <Select v-model:value="formModel.fk_rule" show-search allow-clear style="width: 100%; height: 100%" placeholder="请输入" :options="paymentRule" />
            </FormItem>
          </Col>
          <Col :span="6">
            <FormItem name="reqCode" label="备注">
              <Input v-model:value="formModel.remark" show-search allow-clear style="width: 100%; height: 100%" placeholder="请输入" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Table class="w-fill" bordered :data-source="selectRows" :columns="columns1" :pagination="false" size="small">
        <template #headerCell="{ column }">
          <template v-if="column.dataIndex === 'first'">
            28
            <br />
            46
            <br />
            165
            <br />
            37
            <br />
            S
          </template>
          <template v-if="column.dataIndex === 'second'">
            29
            <br />
            48
            <br />
            170
            <br />
            38
            <br />
            M
          </template>
          <template v-if="column.dataIndex === 'third'">
            30
            <br />
            50
            <br />
            175
            <br />
            39
            <br />
            L
          </template>
          <template v-if="column.dataIndex === 'fourth'">
            31
            <br />
            52
            <br />
            180
            <br />
            40
            <br />
            XL
          </template>
          <template v-if="column.dataIndex === 'fifth'">
            32
            <br />
            54
            <br />
            185
            <br />
            41
            <br />
            2XL
          </template>
          <template v-if="column.dataIndex === 'sixth'">
            33
            <br />
            56
            <br />
            190
            <br />
            42
            <br />
            3XL
          </template>
          <template v-if="column.dataIndex === 'seventh'">
            34
            <br />
            58
            <br />
            195
            <br />
            43
            <br />
            4XL
          </template>
          <template v-if="column.dataIndex === 'eighth'">
            35
            <br />
            <br />
            <br />
            <br />
            5XL
          </template>
          <template v-if="column.dataIndex === 'ninth'">
            36
            <br />
            <br />
            <br />
            <br />
            6XL
          </template>
          <template v-if="column.dataIndex === 'tenth'">
            38
            <br />
            <br />
            <br />
            <br />
            7XL
          </template>
          <template v-if="column.dataIndex === 'eleven'">40</template>
          <template v-if="column.dataIndex === 'twelve'">
            42
            <br />
            <br />
            <br />
            <br />
            00均码
          </template>
          <template v-if="column.dataIndex === 'delivery_day'">
            生产周期
            <br />
            <br />
            <br />
            <br />
            （天）
          </template>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'price'">
            <InputNumber v-model:value="record.price" />
          </template>
          <template v-if="column.dataIndex === 'first'"><InputNumber v-model:value="record.first" /></template>
          <template v-if="column.dataIndex === 'second'"><InputNumber v-model:value="record.second" /></template>
          <template v-if="column.dataIndex === 'third'"><InputNumber v-model:value="record.third" /></template>
          <template v-if="column.dataIndex === 'fourth'"><InputNumber v-model:value="record.fourth" /></template>
          <template v-if="column.dataIndex === 'fifth'"><InputNumber v-model:value="record.fifth" /></template>
          <template v-if="column.dataIndex === 'sixth'"><InputNumber v-model:value="record.sixth" /></template>
          <template v-if="column.dataIndex === 'seventh'"><InputNumber v-model:value="record.seventh" /></template>
          <template v-if="column.dataIndex === 'eighth'"><InputNumber v-model:value="record.eighth" /></template>
          <template v-if="column.dataIndex === 'ninth'"><InputNumber v-model:value="record.ninth" /></template>
          <template v-if="column.dataIndex === 'tenth'"><InputNumber v-model:value="record.tenth" /></template>
          <template v-if="column.dataIndex === 'eleven'"><InputNumber v-model:value="record.eleven" /></template>
          <template v-if="column.dataIndex === 'twelve'"><InputNumber v-model:value="record.twelve" /></template>
          <template v-if="column.dataIndex === 'delivery_day'"><InputNumber v-model:value="record.delivery_day" /></template>
          <template v-if="column.dataIndex === 'delivery_date'">
            <DatePicker format="YYYY/MM/DD" value-format="YYYY-MM-DD" v-model:value="record.delivery_date" />
          </template>
          <template v-if="column.dataIndex === 'remark'">
            <Input v-model:value="record.remark" />
          </template>
        </template>
      </Table>
    </Page>
  </Modal>
</template>

<style scoped></style>
